
import React, { useState } from "react";
import "./index.less";
import UiForm from "./module/index";
import UiCatalogue from "./catalogue/index";
import UiConfig from "./config/index";

const Drag = () => {
  const [list, setList] = useState([]); //列表
  const [newParams, setNewParams] = useState({}); //当前拖拽新增元素
  const [dragEnd, setDragEnd] = useState(true); //拖拽是否结束
  const [valid, setValid] = useState(false); //拖拽是否有效
  const [active, setActive] = useState(-1); //当前编辑控件下标
  function editorChange(val) {
    console.log(val);
  }

  return (
    <div className="drag">
      <UiCatalogue formList={list} setDragEnd={setDragEnd} setNewParams={setNewParams} setValid={setValid} valid={valid} />
      <UiForm setActive={setActive.bind(this)} setList={setList.bind(this)} formList={list} newParams={newParams} dragEnd={dragEnd} valid={valid} active={active} setValid={setValid} />
      <UiConfig setActive={setActive.bind(this)} active={active} formList={list} setList={setList.bind(this)} />
    </div>
  );
};
export default Drag;
